<template>
  <div class="home" style="width: 1200px;margin: auto">
    <el-container>
      <!--    头部  -->
      <el-header>

        <el-row>
          <el-col :span="6">
            <div style="margin-top: 10px">
              <el-link :underline="false" @click="routerIndex('1','/index')">
                <img src="../../public/static/logo.png" height="46" width="96"/>
              </el-link>
              <el-button style="margin-left: 20px" icon="el-icon-search" circle></el-button>
            </div>
          </el-col>
          <el-col :span="12" style="margin: auto;">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
              <el-menu-item index="1">
                <el-button type="primary" @click="routerIndex('1','/index')" size="mini" plain>
                  <p class="el-icon-s-home" style="font-size: 26px"></p>
                </el-button>
              </el-menu-item>
              <el-menu-item index="2">
                <el-button type="primary" @click="routerIndex('2','/edit')" size="mini" plain>
                  <p class="el-icon-document-copy" style="font-size: 26px"></p>
                </el-button>
              </el-menu-item>
              <el-menu-item index="3">
                <el-button type="primary" @click="routerIndex('3','/video')" size="mini" plain>
                  <p class="el-icon-data-board" style="font-size: 26px"></p>
                </el-button>
              </el-menu-item>
              <el-menu-item index="4">
                <el-button type="primary" @click="routerIndex('4','/message')" size="mini" plain>
                  <p class="el-icon-message" style="font-size: 26px"></p>
                </el-button>
              </el-menu-item>
              <el-menu-item index="5">
                <el-button type="primary" @click="routerIndex('5','/my')" size="mini" plain>
                  <p class="el-icon-s-custom" style="font-size: 26px"></p>
                </el-button>
              </el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="6">
            <div class="login_r" v-if="user==null">
              <el-button type="warning" size="mini" round @click="login()">登录</el-button>
              <el-link :underline="false" style="margin-left: 20px" @click="regis()">注册</el-link>
            </div>
            <div class="login_r" v-else>
              <el-popconfirm title="是否确认退出？" @confirm="outlogin" >
                <el-link :underline="false"
                         style="margin-left: 20px"
                         slot="reference">退出</el-link>
              </el-popconfirm>
            </div>
          </el-col>
        </el-row>

      </el-header>
      <!--    内容  -->
      <el-main style="margin: auto">
        <div style="margin: auto">
          <router-view/>
        </div>
      </el-main>
      <!--    尾部  -->
      <el-footer>
        <div class="copy_wei">
          <p class="copy"><a target="_blank" href="//kefu.weibo.com?cs_source=2" class="S_txt2"><i
              class="W_icon icon_weibo"></i>微博客服4000-960-960</a><a class="S_txt2" target="_blank"
                                                                       href="//s.weibo.com/weibo?q=%23%E5%BE%AE%E5%BB%BA%E8%AE%AE%23&amp;bottomnav=1&amp;wvr=6">意见反馈</a><a
              class="S_txt2" target="_blank" href="//weibo.com/aj/static/report.html?_wv=6">舞弊举报</a><a
              class="S_txt2" target="_blank" href="http://ir.weibo.com">About Weibo</a><a class="S_txt2" target="_blank"
                                                                                          href="//career.sina.com.cn?bottomnav=1&amp;wvr=6">微博招聘</a><a
              class="S_txt2" target="_blank" href="//news.sina.com.cn/guide/?bottomnav=1&amp;wvr=6">新浪网导航</a><span
              class="S_txt2">违规内容投诉010-60618076</span><a class="S_txt2" target="_blank"
                                                               href="//service.account.weibo.com/?bottomnav=1&amp;wvr=6">投诉处理大厅</a>
            <a class="S_txt2" href="https://service.account.weibo.com/dmca/rightholders"
               target="__blank">DMCA投诉/Report</a>
            <a class="S_txt2" target="_blank"
               href="https://service.account.weibo.com/ecourt/index">互联网法院微博工作站</a>
            <select class="lang_select" id="lang_select" node-type="changeLanguage">
              <option value="zh-cn">中文(简体)</option>
              <option value="zh-tw">中文(台灣)</option>
              <option value="zh-hk">中文(香港)</option>
            </select>
          </p>
          <p class="copy_v2"><a target="_blank" href="https://beian.miit.gov.cn" class="S_txt2">京ICP证100780号</a><a
              target="_blank" href="https://beian.miit.gov.cn" class="S_txt2">京ICP备12002058号</a><span class="S_txt2">京网文﹝2024﹞0012-005号</span><span
              class="S_txt2">（京）网械平台备字（2022）第00006号</span><span
              class="S_txt2">京食药网食备202210035</span><span
              class="S_txt2">互联网宗教信息服务许可证：京（2022）0000091</span></p>
          <p class="copy_v2"><span class="S_txt2">(京)网药械信息备字（2023）第00076号</span><span class="S_txt2">增值电信业务经营许可证B2-20140447</span><span
              class="S_txt2">增值电信业务经营许可证京B2-20221511</span><span class="S_txt2">乙测资字11510760</span><a
              target="_blank" href="https://weibo.com/aj/static/publications_license.html" class="S_txt2">出版物经营许可证
            新出发京批字第直220253号</a></p>
          <p class="copy_v2"><a target="_blank" href="https://www.12377.cn/" class="S_txt2">中国互联网举报中心</a><a
              target="_blank" href="http://www.bjjubao.org/" class="S_txt2">北京互联网举报中心</a><a target="_blank"
                                                                                                     href="https://service.account.weibo.com/ecourt/report"
                                                                                                     class="S_txt2">内容从业人员违法违规行为举报</a><a
              target="_blank" href="http://www.cyberpolice.cn/wfjb/" class="S_txt2">网络110报警服务</a><a
              target="_blank" href="http://whzf.beijing.gov.cn/" class="S_txt2">北京文化市场举报热线</a><a
              target="_blank" href="http://www.itrust.org.cn/" class="S_txt2">中国互联网协会</a><a target="_blank"
                                                                                                   href="http://www.bnia.cn/"
                                                                                                   class="S_txt2">北京网络行业协会</a><a
              target="_blank" href="http://www.shdf.gov.cn/shdf/channels/740.html" class="S_txt2">扫黄打非举报入口</a><a
              target="_blank" href="http://www.piyao.org.cn/yybgt/index.htm" class="S_txt2">网络谣言曝光台</a></p>
          <p class="company"><span class="S_txt2">互联网新闻信息服务许可编号:11220190001</span><span class="S_txt2">广播电视节目制作经营许可证（京）字第04005号</span><span
              class="copy S_txt2">Copyright © 2009-2024 WEIBO <a class="S_txt2" target="_blank"
                                                                 href="//weibo.com/aj/static/business_license.html?_wv=6">北京微梦创科网络技术有限公司</a></span><span><a
              class="S_txt2" target="_blank"
              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000019"><i
              class="icon_netsecurity"></i>京公网安备11000002000019号</a></span></p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //属性 定义变量
      activeIndex: '1',
      user: {}
    }
  },
  methods: {//定义方法
    login() {
      this.$router.push("/login")
    },
    regis() {
      this.$router.push("/regis")
    },
    outlogin(){
      localStorage.removeItem("user")

      // this.$router.go(0) 刷新当前页面


      this.$message.info("退出成功！！")

      setTimeout(()=>{
        window.location.reload()
      },2000)

      this.$router.push("/")
    },

    routerIndex(activeIndex,router){
      this.$router.push(router)
      localStorage.setItem("active",activeIndex)
    },

  },
  mounted() {//在网页刷新或被加载的时候执行
    //localStorage.setItem("键","值")  添加
    //localStorage.getItem("键")       获取
    // localStorage.removeItem("键")   删除
    this.user = JSON.parse(localStorage.getItem("user"))
    this.activeIndex = localStorage.getItem("active")
  }
}
</script>

<style>
.div_c {
  margin: 10px 10px;
  height: 100px;
  width: 100px;
  background-color: #42b983;
}

.home {
  padding: 0px;
  margin: 0px;
  text-align: left
}

.login_r {
  margin-top: 20px;
  text-align: right;
  margin-right: 50px
}

.el-menu.el-menu--horizontal {
  width: 490px;
}

.el-button--primary.is-plain {
  width: 57px;
  height: 40px;
}

.copy_wei {
  font-size: 12px;
  font-family: system-ui, —apple-system, Segoe UI, Rototo, Emoji, Helvetica, Arial, sans-serif;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  color: #333;
  margin: 0;
  display: block;
  background-color: #f2f2f5;
  text-align: center;
  padding: 20px 0 45px;
  padding-bottom: 20px;
}

.copy_wei a{
  text-decoration: none;
  color: rgba(100,100,100,0.8);
}
</style>
